<template>
    <div v-transfer-dom class="plateNumber">
        <popup v-model="popShow" style="background-color: transparent" height="100%">
            <ul class="input px12 mt60" flex="main:justify cross:center">
                <template v-for="(item, index) in plateNumber">
                    <li class="corner item" :class="{focus: focus == index}" @click="focus = index" v-if="index !== plateNumber.length - 1">{{item}}</li>
                    <li class="corner item" :class="{focus: focus == index}" @click="focus = index" v-else-if="!isEmpty(item)">{{item}}</li>
                    <li class="item newpower corner" :class="{focus: focus == index}" v-else>
                        <i class="iconfont icon-jiahao"></i>
                        <p class="f16 small">新能源</p>
                    </li>
                    <!-- 中间的点 -->
                    <li class="dian" v-if="index == 1"></li>
                </template>
            </ul>
            <section class="bg-main1 abs posbl fitw">
                <div class="px12 h38 tr white-bg mb20"><span class="text2" @click="popShow = false">关闭</span></div>
                <div class="main">
                    <!-- 省会简称键盘 begin -->
                    <zoom-x-transition>
                        <div v-show="focus < 1" class="keyboard-wrap">
                            <div v-for="big in province" class="keyboard" v-once>
                                <ul class="tc">
                                    <li v-for="small in big" class="white-bg corner f18 bd text tap item"
                                        @click="onCarNumber(small)">{{small}}
                                    </li>
                                </ul>
                            </div>
                            <!-- 退格键盘 begin-->
                            <div class="tr backspace" @click="onBackspace"><i
                                    class="iconfont icon-tuige f32 text3 mr40"></i></div>
                            <!-- 退格键盘 end-->
                        </div>
                    </zoom-x-transition>
                    <!-- 省会简称键盘 end -->

                    <!--车牌号键盘 begin -->
                    <zoom-x-transition>
                        <div class="keyboard keyboard-wrap carNumber" v-show="focus > 0">
                            <ul>
                                <li v-for="item in carNumber.slice(0, 10)" class="white-bg corner f18 bd text tap item"
                                    @click="onCarNumber(item)" :class="{disabled: focus == 1}">{{item}}
                                </li>
                                <li v-for="item in carNumber.slice(10, -4)" class="white-bg corner f18 bd text tap item"
                                    v-once
                                    @click="onCarNumber(item)">{{item}}
                                </li>
                                <li v-for="item in carNumber.slice(-4)" class="white-bg corner f18 bd text tap item"
                                    @click="onCarNumber(item)" :class="{disabled: focus !== 6}">{{item}}
                                </li>
                            </ul>
                            <!-- 退格键盘 begin-->
                            <div class="tr backspace" @click="onBackspace"><i
                                    class="iconfont icon-tuige f32 text3 mr40"></i></div>
                            <!-- 退格键盘 end-->
                        </div>
                    </zoom-x-transition>
                    <!--车牌号键盘 end-->
                </div>
            </section>
        </popup>
    </div>
</template>
<script>
  import { ZoomXTransition } from 'vue2-transitions'

  const province1 = ['京', '泸', '粤', '津', '冀', '普', '蒙', '辽', '吉', '黑']
  const province2 = ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘']
  const province3 = ['桂', '琼', '渝', '川', '贵', '云', '藏', '陜']
  const province4 = ['甘', '青', '宁', '新', '使']
  const province = [province1, province2, province3, province4]
  const carNumber = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '港', '澳', '学', '领']

  const filter = (x) => x !== '' && x !== undefined && x !== null
  export default {
    props: {
      show: {
        default: false
      },
      value: {
        default: ''
      }
    },
    data () {
      return {
        province,
        carNumber,
        focus: 0
      }
    },
    computed: {
      popShow: {
        get () {
          return this.show
        },
        set (v) {
          this.$emit('update:show', v)
        }
      },
      plateNumber: {
        get () {
          const array = new Array(8)
          this.value.substr(0, 9).split('').forEach((item, index) => array[index] = item)
          return array
        },
        set (v) {
          this.$emit('input', v.filter(filter).join(''))
        }
      }
    },
    created () {
    },
    methods: {
      // 输入选择省会城市简称 / 选择车牌号
      onCarNumber (v) {
        const array = this.plateNumber
        array[this.focus] = v
        this.plateNumber = array
        if (this.focus < this.plateNumber.length - 1) {
          this.focus++
        } else {
          this.popShow = false
        }
      },
      // 退格
      onBackspace () {
        const array = this.plateNumber
        array[this.focus] = ''
        this.plateNumber = array
        if (this.focus > 0) this.focus--
      }
    },
    components: {
      ZoomXTransition
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../css/variable';

    .main {
        overflow: hidden;
        position: relative;
        height: 210px;
        .keyboard-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
    }

    .keyboard {
        $w: 32px;
        $h: 40px;
        $space: 4px;
        $col: 10;
        $allWidth: ($w + $space) * $col;
        line-height: $h;
        text-align: center;
        ul {
            margin-left: -$space/2;
            width: $allWidth;
            display: inline-block;
        }
        .item {
            width: $w;
            height: $h;
            display: inline-block;
            margin-left: $space;
            text-align: center;
            margin-top: 6px;
        }
    }

    .backspace {
        line-height: normal;
        .icon-tuige {
            position: relative;
            top: -38px;
        }
    }

    .input {
        $size: 35px;
        line-height: $size;
        .item {
            width: $size;
            height: $size;
            text-align: center;
            background-color: white;
            &.focus {
                border: 1px solid $c3;
            }
        }
        .dian {
            display: inline-block;
            $size: 6px;
            margin: 0 -5px;
            border-radius: 50%;
            width: $size;
            height: $size;
            background-color: $c4;
        }
    }

    .newpower {
        position: relative;
        i {
            position: relative;
            top: -5px;
            font-size: 12px;
        }
        .small {
            position: absolute;
            bottom: -3px;
            left: -6px;
            line-height: normal;
            transform: scale(0.5);
            white-space: nowrap;
        }
    }

    .carNumber {
        ul {
            text-align: left;
        }
    }
</style>
